<template>
  <a-modal :title="type == 1 ? '入账' : '查看'" :visible="visible" width="1000px" :footer="null" @cancel="handleCancel">
    <a-descriptions bordered>
      <a-descriptions-item :label="$t('all.autotext1718')">
        {{ info.businessCode }}
      </a-descriptions-item>
      <a-descriptions-item label="临床试验方案编号">
        {{ info.proNo || '-' }}
      </a-descriptions-item>

      <a-descriptions-item v-if="type == 1" label="开票金额">
        ￥{{ info.invoiceMoney?.toFixed(2) || 0.0 }}
      </a-descriptions-item>

      <a-descriptions-item v-if="type == 2" label="新增开票">
        ￥{{ info.invoiceMoney?.toFixed(2) }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1743')" v-if="type == 1">
        ￥{{ allNumber }}
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <!-- 横杠或许可以兼容旧的数据 -->

        {{ info.status === '0' ? '已开票' : info.status === '1' ? '已入账' : info.status === '3' ? '已废除' : '-' }}
      </a-descriptions-item>

      <a-descriptions-item label="入账人员">
        {{ info.applicant || info.account || '-' }}
      </a-descriptions-item>

      <!-- <a-descriptions-item :label="$t('all.autotext1842')">
        {{ info.applicantTime }}
      </a-descriptions-item> -->
      <a-descriptions-item :label="$t('all.autotext1795')">
        {{ info.invoiceTime || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="入账金额" v-if="type === 2">
        {{ info.cashFlow ? `￥${info.cashFlow.toFixed(2)}` : '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="入账日期" v-if="type === 2">
        {{ info.cashFlowTime || '-' }}
      </a-descriptions-item>
      <!-- 去掉备注 -->
      <!-- <a-descriptions-item :label="$t('all.autotext983')" v-if="type === 2">
        {{ info.remarks || '-' }}
      </a-descriptions-item> -->
      <!--      <a-descriptions-item :label="$t('all.autotext1194')" v-if="type === 2 && info.file">
        <div class="link">
          <a v-for="(item, i) in info.fileList" :key="i" @click="preview(item.fileUrl)">{{ item.fileName }}</a>
        </div>
      </a-descriptions-item>-->
    </a-descriptions>
    <div class="upload" v-if="type === 1">
      <!-- <a-radio-group v-model="status" @change="$refs.formRef.resetFields()">
        <a-radio :value="1">{{ $t('all.autotext130') }}</a-radio>
        <a-radio :value="2">{{ $t('all.autotext515') }}</a-radio>
      </a-radio-group> -->
      <a-form-model ref="formRef" :model="form" v-bind="formItemLayout" labelAlign="left" :rules="formRules"
        class="form-wrap">
        <template>
          <a-form-model-item label="入账金额（含税）" prop="cashFlowIncludeTax">
            <a-input-number :min="0" style="width: 270px" :precision="2" :placeholder="$t('all.autotext1802')"
              v-model="form.cashFlowIncludeTax" />
            <span style="margin-left: 10px">{{ $t('all.autotext811') }}</span>
          </a-form-model-item>
          <a-form-model-item label="入账金额（未税）" prop="cashFlowBeforeTax">
            <a-input-number :min="0" style="width: 270px" :precision="2" placeholder="请输入未税金额"
              v-model="form.cashFlowBeforeTax" />
            <span style="margin-left: 10px">{{ $t('all.autotext811') }}</span>
          </a-form-model-item>
          <a-form-model-item label="入账日期" prop="cashFlowTime">
            <a-date-picker v-model="form.cashFlowTime" style="width: 300px" valueFormat="YYYY-MM-DD" />
          </a-form-model-item>
        </template>
      </a-form-model>
    </div>
    <div class="footer" v-if="type === 1">
      <a-space>
        <a-button @click="handleCancel">{{ $t('all.autotext975') }}</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">
          {{ $t('all.post') }}
        </a-button>
      </a-space>
    </div>
    <imgPreview ref="imgPerviewRef" />
  </a-modal>
</template>

<script>
import { getContractCashFlow, upContractCashFlow } from '@/api/entry/entry'
import imgPreview from '@/components/preview/imgPreview'

export default {
  components: { imgPreview },
  computed: {
    allNumber: function () {
      if (!this.form.cashFlow) {
        return this.info?.totalCashFlow?.toFixed(2)
      } else {
        if (this.info?.totalCashFlow) {
          let totalCashFlow = this.info?.totalCashFlow
          let cashFlow = this.form?.cashFlow
          const num = totalCashFlow + cashFlow
          if (typeof num === 'number') {
            return num?.toFixed(2)
          } else {
            return '-'
          }
        } else {
          return typeof this.form?.cashFlow === 'number'
            ? this.form?.cashFlow?.toFixed(2)
            : '-'
        }
      }
    }
  },
  data() {
    return {
      type: 1,
      id: '',
      visible: false,
      info: {},
      fileList: [],
      loading: false,
      status: 1,
      form: {
        cashFlowIncludeTax: undefined,
        cashFlowTime: undefined,
        cashFlowBeforeTax: undefined
      },
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 15 }
      },
      formRules: {
        cashFlowIncludeTax: [
          {
            required: true,
            message: '请输入入账金额（含税）',
            trigger: 'blur'
          }
        ],
        cashFlowBeforeTax: [
          {
            required: true,
            message: '请输入入账金额（未税）',
            trigger: 'blur'
          }
        ],
        cashFlowTime: [
          {
            required: true,
            message: '请选择入账日期',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    open(id, type) {
      this.type = type
      this.id = id
      this.getDetail()
      this.visible = true
    },
    async getDetail() {
      const res = await getContractCashFlow({
        id: this.id
      })
      this.info = res
      if (res.file) {
        this.info.fileList = JSON.parse(res.file)
      }
    },
    handleChange({ file, fileList }) {
      this.fileList = fileList.map((item) => {
        return {
          ...item,
          url: this.$options.filters.dealImageUrl(item.response?.data)
        }
      })
    },
    async handleOk() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return
        // let fileArr = this.fileList.map(item => {
        //   return {
        //     fileName: item.name,
        //     fileUrl: item.response.data
        //   }
        // })
        this.loading = true
        try {
          await upContractCashFlow({
            id: this.id,
            ...this.form
            // file: JSON.stringify(fileArr)
          })
          this.$emit('refresh')
          this.handleCancel()
        } finally {
          this.loading = false
        }
      })
    },
    handleCancel() {
      this.$refs.formRef?.resetFields()
      this.info = {}
      this.fileList = []
      this.visible = false
    },
    // 单文件预览
    preview(fileUrl) {
      const formatImg = /(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
      if (formatImg.test(fileUrl)) {
        this.$refs.imgPerviewRef.open(fileUrl)
      } else {
        // 打开空白页 展示文件
        const fullFileUrl = this.$options.filters.dealImageUrl(fileUrl)
        window.open(fullFileUrl, '_blank')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.form-wrap {
  margin-top: 20px;
}

/deep/.ant-descriptions-item-label {
  white-space: nowrap;
}

.upload {
  padding: 30px 0 50px;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

.link {
  a {
    margin-right: 10px;
  }
}
</style>
